{% extends "pc/template.html" %}

{% block title %}
    支付方式列表
{% endblock %}

{% include 'pc/公共样式配置/CSS总样式.html' %}

{% block css %}
<link rel="stylesheet" href="/static/HubUI/css/sweetalert2.css">
<style>
    .card {
        margin: 1rem 0;
    }
    .table-responsive {
        margin: 0;
    }
    .action-buttons .btn {
        padding: 0.25rem 0.5rem;
        margin: 0 0.2rem;
    }
    .description-text {
        display: inline-block;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: help;
        vertical-align: middle;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-xxl flex-grow-1 container-p-y">
    <!-- 支付方式列表卡片 -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">支付方式列表</h5>
            <div>
                <button type="button" class="btn btn-primary" onclick="showAddPayMethodModal()">
                    <i class="bx bx-plus"></i> 添加支付方式
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>描述</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="payMethodTableBody">
                        <!-- 支付方式数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 添加支付方式模态框 -->
    <div class="modal fade" id="addPayMethodModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加支付方式</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addPayMethodForm">
                        <div class="mb-3">
                            <label class="form-label" for="payMethodName">支付方式名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="payMethodName" name="name" required maxlength="20">
                            <small class="text-muted">支付方式名称不能超过20个字符</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="payMethodDescription">描述</label>
                            <textarea class="form-control" id="payMethodDescription" name="description" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="addPayMethod()">添加</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑支付方式模态框 -->
    <div class="modal fade" id="editPayMethodModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑支付方式</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editPayMethodForm">
                        <input type="hidden" id="editPayMethodId">
                        <div class="mb-3">
                            <label class="form-label" for="editPayMethodName">支付方式名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="editPayMethodName" name="name" required maxlength="20">
                            <small class="text-muted">支付方式名称不能超过20个字符</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="editPayMethodDescription">描述</label>
                            <textarea class="form-control" id="editPayMethodDescription" name="description" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updatePayMethod()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 页面加载完成后获取支付方式列表
    document.addEventListener('DOMContentLoaded', function() {
        getPayMethodList();
    });

    // 获取支付方式列表
    function getPayMethodList() {
        const loadingToast = Swal.fire({
            title: '加载中...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        axios.get('/api/order/get_pay_method_list/')
            .then(function(response) {
                if (response.data.code === 200) {
                    renderPayMethodTable(response.data.data);
                } else {
                    Swal.fire('错误', response.data.msg, 'error');
                }
            })
            .catch(function(error) {
                Swal.fire('错误', '获取支付方式列表失败', 'error');
            })
            .finally(function() {
                loadingToast.close();
            });
    }

    // 渲染支付方式表格
    function renderPayMethodTable(payMethods) {
        const tbody = document.getElementById('payMethodTableBody');
        tbody.innerHTML = '';

        payMethods.forEach(payMethod => {
            const tr = document.createElement('tr');
            tr.setAttribute('data-id', payMethod.id);
            tr.innerHTML = `
                <td>${payMethod.id}</td>
                <td>${payMethod.name}</td>
                <td>
                    <div class="description-text" title="${payMethod.description || '-'}">
                        ${payMethod.description || '-'}
                    </div>
                </td>
                <td class="action-buttons">
                    <button class="btn btn-sm btn-info" onclick="editPayMethod(${payMethod.id})">
                        <i class="bx bx-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-danger" onclick="deletePayMethod(${payMethod.id})">
                        <i class="bx bx-trash"></i>
                    </button>
                </td>
            `;
            tbody.appendChild(tr);
        });
    }

    // 显示添加支付方式模态框
    function showAddPayMethodModal() {
        const modal = new bootstrap.Modal(document.getElementById('addPayMethodModal'));
        document.getElementById('addPayMethodForm').reset();
        modal.show();
    }

    // 添加支付方式
    function addPayMethod() {
        const form = document.getElementById('addPayMethodForm');
        const formData = new FormData(form);
        
        // 验证必填字段
        const name = formData.get('name');
        if (!name) {
            Swal.fire('错误', '请填写支付方式名称', 'error');
            return;
        }

        // 立即关闭模态框
        const modal = bootstrap.Modal.getInstance(document.getElementById('addPayMethodModal'));
        modal.hide();

        const loadingToast = Swal.fire({
            title: '添加中...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        axios.post('/api/order/create_pay_method/', formData)
            .then(function(response) {
                if (response.data.code === 200) {
                    Swal.fire({
                        icon: 'success',
                        title: '成功',
                        text: '支付方式添加成功',
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        getPayMethodList();
                        form.reset();
                    });
                } else {
                    throw new Error(response.data.msg);
                }
            })
            .catch(function(error) {
                Swal.fire('错误', error.message || '添加支付方式失败', 'error');
            })
            .finally(function() {
                loadingToast.close();
            });
    }

    // 编辑支付方式
    function editPayMethod(payMethodId) {
        // 从表格中获取当前行的数据
        const row = document.querySelector(`tr[data-id="${payMethodId}"]`);
        if (!row) {
            Swal.fire('错误', '未找到支付方式信息', 'error');
            return;
        }

        // 获取当前行的数据
        const name = row.querySelector('td:nth-child(2)').textContent;
        const description = row.querySelector('.description-text').getAttribute('title');
        
        // 填充表单
        document.getElementById('editPayMethodId').value = payMethodId;
        document.getElementById('editPayMethodName').value = name;
        document.getElementById('editPayMethodDescription').value = description === '-' ? '' : description;

        // 显示模态框
        const modal = new bootstrap.Modal(document.getElementById('editPayMethodModal'));
        modal.show();
    }

    // 更新支付方式
    function updatePayMethod() {
        const payMethodId = document.getElementById('editPayMethodId').value;
        const form = document.getElementById('editPayMethodForm');
        const formData = new FormData(form);
        
        // 验证必填字段
        const name = formData.get('name');
        if (!name) {
            Swal.fire('错误', '请填写支付方式名称', 'error');
            return;
        }

        // 立即关闭模态框
        const modal = bootstrap.Modal.getInstance(document.getElementById('editPayMethodModal'));
        modal.hide();

        const loadingToast = Swal.fire({
            title: '更新中...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        axios.post(`/api/order/update_pay_method/${payMethodId}/`, formData)
            .then(function(response) {
                if (response.data.code === 200) {
                    Swal.fire({
                        icon: 'success',
                        title: '成功',
                        text: '支付方式更新成功',
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        getPayMethodList();
                    });
                } else {
                    throw new Error(response.data.msg);
                }
            })
            .catch(function(error) {
                Swal.fire('错误', error.message || '更新支付方式失败', 'error');
            })
            .finally(function() {
                loadingToast.close();
            });
    }

    // 删除支付方式
    function deletePayMethod(payMethodId) {
        Swal.fire({
            title: '确认删除',
            text: '确定要删除这个支付方式吗？',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
        }).then((result) => {
            if (result.isConfirmed) {
                const loadingToast = Swal.fire({
                    title: '删除中...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                axios.delete(`/api/order/delete_pay_method/${payMethodId}/`)
                    .then(function(response) {
                        if (response.data.code === 200) {
                            Swal.fire({
                                icon: 'success',
                                title: '成功',
                                text: '支付方式删除成功',
                                showConfirmButton: false,
                                timer: 1500
                            }).then(() => {
                                getPayMethodList();
                            });
                        } else {
                            Swal.fire('错误', response.data.msg, 'error');
                        }
                    })
                    .catch(function(error) {
                        Swal.fire('错误', '删除支付方式失败', 'error');
                    })
                    .finally(function() {
                        loadingToast.close();
                    });
            }
        });
    }
</script>
{% endblock %}

{% block nav_left %}
{% include "pc/components/左侧导航栏.html" %}
{% endblock %}

{% block NavBar %}
{% endblock %}

{% include 'pc/公共样式配置/JS总样式.html' %}

{% block footer %}
    {% include "pc/components/Footer.html" %}
{% endblock %}